<!--
 * @Author: your name
 * @Date: 2021-08-25 15:18:51
 * @LastEditTime: 2021-08-25 15:18:51
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\others\404.vue
-->
<template>
  <Card :loading="isLoad">
    <template #title>
        <div class="card_header">
          <div class="card_header_title">
                 {{ title }}
          </div>
          <div class="card_header_time">
                 <Tag>{{ time }}</Tag>
          </div>
        </div>
    </template>
    <div ref="Doms" class="echart" :style="{width: '100%',height:`${height}`}"></div>
  </Card>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref, watch } from 'vue';
import { Card, Row, Col,Tag } from 'ant-design-vue';
import { useECharts } from '@/hooks/useECharts';
export default defineComponent({
  name: 'serviceTemp',
  components: {
    Card,
    Row,
    Col,
    Tag
  },
  props: {
    datas: {
      type: [Array, String]
    },
    isLoad:Boolean,
    time:String,
    title:String,
    height:{
       type:String,
       default:()=>{
           return '157px'
       } 
    }
  },
  setup(props) {
    const Doms = ref<HTMLDivElement | null>(null);
    const initEcharts = () => {
      let { setOptions } = useECharts(Doms as Ref<HTMLDivElement>, 'westeros');
      setOptions(props.datas);
    };
    watch(()=>props.isLoad,()=>{
       if(!props.isLoad){
         setTimeout(()=>{
            initEcharts();
         },100)
       }
    })
    return {
      Doms,
    };
  }
});
</script>

<style lang="less" scoped>
.card_header{
   display: flex;
   justify-content: space-between;
   align-items: center;
   &_title{
     font-size: 13px;
     color: #666;
   }
}
</style>
